<template>
  <div class="edit-board">
    <LowCode />
    <WidgetEditor
      v-if="isWidgetEditorShow"
      :dataSourceInfo="dataSourceInfo"
      :componentData="componentData"
      @cancel="handleCancel"
      @save="handleSave"
    />
  </div>
</template>

<script>
import LowCode from './LowCode'
import WidgetEditor from './WidgetEditor'
import EventBus from './LowCode/EventBus'
import { editBoardPage, addDashboard, getBoardById } from '@/api/dashboard/board'
// import { getComponentListByTypes, addSnapshot, deepCopy } from './LowCode/lib/utils'
// import { analysisComponentTypes } from './LowCode/lib/const'
import { save } from './LowCode/lib/save'
import { getChartAxisData, updateAnalysisComponent } from './LowCode/lib/analysisData'

export default {
  props: {},
  data() {
    return {
      id: '',
      data: {},
      dataSourceInfo: null,
      componentData: null,
      isWidgetEditorShow: false,
    }
  },
  created() {
    this.$store.commit('lowCode/resetSnapshot')
    const { id } = this.$route.query
    this.id = id
    this.getData()
    this.initEvent()
  },
  methods: {
    initEvent() {
      // 保存
      EventBus.$once('save', () => {
        const { itemList, pageOperation } = save()
        editBoardPage({
          ...this.data,
          itemList,
          pageOperation,
        })
          .then(() => {
            this.$message.success('保存成功')
          })
          .catch((err) => {
            this.$message.error(err.response.data.message)
          })
        // this.$store.commit("lowCode/setPreviewData", {componentList, pageSetting})
      })

      // // 预览
      // EventBus.$once("preview", () => {
      //   this.$router.push({ path: '/dashboard/dashboardPreview', query: { id: this.id, type: 'preview' } })
      // })

      // 另存为
      EventBus.$once('saveAsSave', (form) => {
        const { itemList, pageOperation } = save()
        addDashboard(
          {
            ...this.data,
            ...form,
            id: undefined,
            itemList,
            pageOperation,
          },
          2
        ) // type: 1修改除itemList和pageOperation的所有内容.2修改itemList和pageOperation
          .then((data) => {
            if (data.code === '000000') {
              this.$message.success('另存为成功')
            } else {
            }
          })
        // this.$store.commit("lowCode/setPreviewData", {componentList, pageSetting})
      })

      // 编辑业务组件
      EventBus.$once('showAnalysisEditor', () => {
        const { selectedComponent } = this.$store.state.lowCode
        const chartAxisData = getChartAxisData(selectedComponent.props.value)
        const { databaseName, datasourceId, gradeThematicId, tableName, tableCode } = chartAxisData.dataSource
        this.dataSourceInfo = {
          databaseName,
          datasourceId,
          gradeThematicId,
          tableCode,
          tableName,
        }
        this.componentData = {
          ...selectedComponent.props.value,
        }
        this.isWidgetEditorShow = true
      }).$once('cancelList', () => {
        // this.$refs.comfirmRef.show()
        this.$router.push({ path: '/dashboard/myDashboard' })
      })
    },
    getData() {
      getBoardById({ id: this.id }).then((data) => {
        this.data = data
        const { componentList, pageSetting } = JSON.parse(this.data.pageOperation)
        if (typeof pageSetting.backgroundColor.opacity !== 'number') {
          pageSetting.backgroundColor.opacity = 1
        }
        // this.$store.commit('lowCode/setCanvasComponentList', componentList)
        this.$store.commit('lowCode/setPageSetting', pageSetting)
        const saveData = {
          pageSetting,
          canvasComponentList: componentList,
        }
        // addSnapshot('all', deepCopy(saveData))
        EventBus.$emit('init', saveData)
      })
    },
    handleSave(val) {
      console.log(val)
      const { selectedComponent, canvasComponentList } = this.$store.state.lowCode
      const styleConfig = {
        globeStyle: val.styleConfig.globeStyle ? JSON.parse(val.styleConfig.globeStyle) : '',
        seriesStyle: val.styleConfig.seriesStyle ? JSON.parse(val.styleConfig.seriesStyle) : '',
      }
      selectedComponent.props.value.chartTypeId = String(val.chartType)
      selectedComponent.props.value.dasChartTypeId = val.chartType
      selectedComponent.props.value.chartStyle = JSON.stringify(styleConfig)
      selectedComponent.props.value.chartAxisData = val.tableSettings
    },
    handleCancel() {
      this.isWidgetEditorShow = false
      this.dataSourceInfo = null
      this.analysisData = null
      const { selectedComponent, canvasComponentList } = this.$store.state.lowCode
      updateAnalysisComponent(selectedComponent.key, canvasComponentList)
      // const {
      //   selectedComponent,
      //   canvasComponentList
      // } = this.$store.state.lowCode
      // Api.queryModuleDetail({mId: selectedComponent.props.value.id})
      // .then((res)=> {
      //   selectedComponent.props.value = res.data
      //   updateAnalysisComponent(selectedComponent.key, canvasComponentList)
      // })
    },
  },
  watch: {
    // $route(to, from) {
    //   console.log(to.path === from.path && to.query.id !== from.query.id)
    //   this.id = to.query.id
    //   if(to.path === from.path && to.query.id !== from.query.id){
    //     this.getData()
    //   }
    // },
  },
  components: {
    LowCode,
    WidgetEditor,
  },
}
</script>

<style lang="less" scoped>
.edit-board {
  height: 100%;
}
</style>
